<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
    
    <style>
        [v-cloak]{
            display:none
        }
    </style>
</head>

<body>
 <div id="app">
     <!-- 使用v-cloak,可以解决插值表达式闪烁问题 -->
     <p v-cloak>{{msg}}=============</p>
     <h1 v-text="msg">1234547897</h1>
    
     <!-- 默认 v-text 是没有闪烁问题的 -->
     <!-- v-text会覆盖元素中的原本的内容，但是插值表达式，只会替换自己的这个占位符，不会把整个元素的内容清空 -->

<div v-html='msg2'></div>
<!-- v-bind 用于绑定属性的指令 -->
<!-- <input type="button" value="按钮" v-bind:title="mytitle +'123'"> -->
<!-- v-bind ：指令可简写成 ：要绑定的属性，可以写合法的js表达式 -->

<input type="button" value="按钮"  v-on:click="show">
<!-- v-on: 绑定事件，缩写是@，v-bind: 绑定属性，缩写是： -->
 </div>


 <script src="./lib/vue.js"></script>
 <script>
     new Vue({
         el:'#app',
         data:{
             msg:'123',
             msg2:'<h1>666</h1>',
             mytitle:'自定义'

        
         },
         methods:{
             show:function(){
                 alert('Hello World')
             }
         }

     })
 </script>
    
</body>
</html>